<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div v-if="pageflag" class="chart-container">
    <div class="box">
      <div class="box-info">
        <div>快递单量</div>
        <div class="light animat">19.04<span class="ext">亿件</span></div>
      </div>
      <div class="box-info box-img2">
        <div>业务收入</div>
        <div class="light animat">76.56<span class="ext">亿元</span></div>
      </div>
      <div class="box-info box-img3">
        <div>服务网点数量</div>
        <div class="light animat">1378<span class="ext">家</span></div>
      </div>
      <div class="box-info box-img4">
        <div>末端驿站数量</div>
        <div class="light animat">6289<span class="ext">家</span></div>
      </div>
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';

export default {
  data() {
    return {
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;

      this.$nextTick(() => {
        this.init();
      });
      // this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
        );
      });
    },
    init() { },
  },
};
</script>
<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: 100%;

  .box {
    position: absolute;
    top: 0px;
    left: 15px;
    width: 100%;
    height: 70px;
    z-index: 0;
    // border: 1px solid red;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .box-info {
      // border: 1px solid red;
      // margin: 2px 12px;
      margin-left: -26px;
      width: 115px;

      // line-height: 38px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      // line-height: 40px;
      padding: 20px 0px 20px 70px;

      background: url('../../assets/img/launch/home/lrc_bg1.png') no-repeat center;
      background-position: 0px 0px;
      background-size: 32% 87%;
      // // 呼吸光效
      // &::after {
      //   content: '';
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   background: radial-gradient(
      //     circle,
      //     rgba(255, 255, 255, 0.1),
      //     transparent
      //   );
      //   animation: breathe 3s ease-in-out infinite;
      // }

      // // 缩放效果
      // animation: bgScale 4s ease-in-out infinite;

      .light {
        margin-top: 20px;
        // margin-bottom: 12px;
        // padding-left: 10px;
        color: #c8e2ff;
        font-size: 28px;
        font-weight: 600;
        line-height: 36px;
        font-family: PangMenZhengDao;

        .ext {
          padding-left: 4px;
          font-size: 14px;
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
            'Lucida Sans', Arial, sans-serif;
        }
      }
    }

    .box-img2 {
      background-image: url('../../assets/img/launch/home/lrc_bg2.png');
      animation-delay: 0.5s;
    }

    .box-img3 {
      background-image: url('../../assets/img/launch/home/lrc_bg3.png');
      animation-delay: 1s;
    }

    .box-img4 {
      background-image: url('../../assets/img/launch/home/lrc_bg4.png');
      animation-delay: 1.5s;
    }
  }
}

@keyframes breathe {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes bgScale {

  0%,
  100% {
    background-size: 35% 90%;
    filter: brightness(0.9);
  }

  50% {
    background-size: 35% 90%;
    filter: brightness(1.1);
  }
}
</style>
